<template>
	<basic-layout v-loading="loading" :showVertical="false">
		<template v-slot:content-main>
			<div v-if="showNavSec" class="lists-section" ref="lists">
				<div
					class="list-section"
					v-for="(item) in groupList"
					:key="item.dictValue">
					<div class="list-title">{{ item.dictLabel }}</div>
					<div class="list-content">
						<animate-card
							v-for="(child, index) in item.projects"
							:key="child.projectId"
							:index="index"
							:name="child.name"
							:image="child.coverUrl"
							:slug="child.projectId"
							@click="handleCheckoutWork(child.projectId)"
						/>
						<!-- '?x-oss-process=style/h200' -->
					</div>
				</div>
			</div>
			<div class="work-page">
				<top-img-list-m></top-img-list-m>
			</div>
		</template>
	</basic-layout>
</template>

<script>
import BasicLayoutBody from "@/components/layout/BasicLayoutBody";
import AnimateCard from "@/components/AnimateCard";
import TopImgListM from "@/components/TopImgListM";
import { getListGroup } from '@/api';

export default {
	components: {
		"basic-layout": BasicLayoutBody,
		AnimateCard,
		TopImgListM
	},
	data() {
		return {
			loading: false,
			groupList: [],
			groupType: {
				areaFlag: 'SET_AREA_GROUP',
				familyFlag: 'SET_FAMILY_GROUP',
				styleFlag: 'SET_STYLE_GROUP',
				typeFlag: 'SET_TYPE_GROUP',
				yearFlag: 'SET_YEAR_GROUP',
				cityFlag: 'SET_CITY_GROUP'
			}
		};
	},
	watch: {
		["$route"](newVal, oldVal) {
			if (newVal.query.cat_id !== oldVal.query.cat_id) {
				this.getGroup();
			}
		}
	},
	computed: {
		showNavSec() {
			return (this.$route.path === '/works' || this.$route.path === '/works/detail') && this.$route.query.cat_id;
		}
	},
	created() {
		this.getGroup();
	},
	methods: {
		getGroup() {
			// this.groupList = [];
			const value = this.$route.query.cat_id || 'areaFlag';
			getListGroup({flagType: value}).then((res) => {
				if(res.code == 200) {
					this.groupList = [...res.data];
					this.$store.commit(this.groupType[value], [...res.data]);
					this.$nextTick(() => {
						let groupHeight = this.$refs.lists ? this.$refs.lists.clientHeight : 0;
						console.log('group-h-', groupHeight);
						this.$store.commit('SET_TOP_HEIGHT', groupHeight - 220);
					})
				} else {
					this.$message.error(res.msg)
				}
			}).catch((err) => {
				
			});
		},
		handleCheckoutWork(slug) {
			let query = !this.$route.query.cat_id ? {cat_id: 'areaFlag'} : this.$route.query;
			this.$router.push({
				// name: "WorkDetail",
				// params: {
				// 	slug: slug
				// },
				path: "works/detail",
				query: {...query, detail_id: slug}
			});
		}
	}
};
</script>
	
<style lang="scss" scoped>
.lists-section {
	padding-left: 20px;

	.list-section {
		margin-bottom: 15px;
		.list-title {
			font-size: 14px;
			font-weight: 400;
			color: #6d6d6d;
			margin-bottom: 4px;
		}

		.list-content {
			display: flex;
			flex-wrap: wrap;
			.item {
				position: relative;
				width: 69px;
				height: 69px;
				margin: 0 20px 20px 0;
				.user-image {
					width: 69px;
					height: 69px;
				}
				.item_title {
					display: none;
					width: 69px;
					height: 69px;
					line-height: 69px;
					overflow: hidden;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					text-align: center;
					font-size: 7px;
				}
				&:hover {
					transition: all 0.2s ease-out;
					opacity: 1;
					transform: scale(1.5);
					.item_title {
						z-index: 999;
						position: absolute;
						top: 0;
						left: 0;
						display: inline-block;
					}
				}
			}
		}
	}
}
.side-section {
	.live-image {
		max-width: 100%;
	}
}

@media (max-width: 1200px) {
	.lists-section {
		padding: 0px 22px;
	}
	.side-section {
		padding: 0 25px;
	}
}
</style>  